<extend name="common/base" />

<block name="resource">
    <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .pic_row_15 .col-md-4{
          /* padding:0; */
          width:386px;
          padding:0;
          margin-right:20px;
          overflow:hidden;
      }
      .pic_row_15 div a:hover img{
         transition: all .2s ease;
      }
     .pic_row_15 div a:hover img{
             transform: scale(1.1, 1.1);
       }
    </style>
</block>

<block name="content">
    <!--赛事图片切换-->
    <!-- 当ie大于IE10的时候显示动画 -->
    <div class="swiper-banner1 swiper-banner2 relative">
        <!-- 第一张的图片地址 -->
        <div class="swiper-banner absolute"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <volist name="matches" id="match" key="index">
                    <div class="swiper-slide" data-num='{$index}'>
                        <a href="/match-races-{$match.id}">
                            <div class="event-info">
                               <div>{$match.title}</div>
                            </div>
                            <img src="{$match.pc_cover|default=$match['cover']}" class="load_img_match" alt="{$match.title}"/>
                        </a>
                    </div>
                </volist>
                <div class="swiper-pagination" style="display:none"></div>
            </div>
        </div>
        <div class="btns relative">
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <!-- 当是低版本的ie只显示一张背景图 -->
    <div class="swiper-banner1 contain_banner" style="display:none;">
        <div class="banner_center"></div>
    </div>
    <div style="background:#1e1e1e;">
          <div class="main-box" style="height:auto;overflow:hidden;background:none;padding-top:20px;">
               <div class="row pic_row_15" style="width:1300px;margin:0;">
                  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="/match-game-2" title="英雄联盟">
                        <img src="__ASSET__/Home/v4/src/images/lol.jpg" alt="英雄联盟">
                    </a>
                  </div>
                  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="/match-game-4" title="DOTA2">
                        <img src="__ASSET__/Home/v4/src/images/dota2.jpg" alt="DOTA2">
                    </a>
                  </div>
                  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="/match-game-7" title="CSGO">
                        <img src="__ASSET__/Home/v4/src/images/csgo.jpg" alt="DOTA2">
                    </a>
                 </div>
              </div>
         </div>
    </div>
    <div class="black-bg paddingtb20">
        <include file="MatchV4/player_template" />
    </div>  
    <div class="container paddingtb20 paddingb120">
        <!--热门比赛-->
        <div class="match-main-left white-bg left">
            <div class="main-right-box">
                <h1 class="font12 colorthree">
                    <p class="h1-left left">
                       <span class="pre active" title="热门赛事">
                            <i class="hot-icon"></i>
                            <b>热门赛事</b>
                        </span>
                        <span class="pre" title="赛事预告">
                            <i class="pre-icon"></i>
                            <b>赛事预告</b>
                        </span>
                    </p>
                    <p class="h1-right right">
                        <a href="/match-all" class="colorthree">
                            <i class="event-icon"></i>
                            <span>全部赛事</span>
                        </a>
                    </p>
                </h1>
                <div class="event-tab">
                    <notempty name="hot_list">
                        <div class="event-hot ">
                            <!-- 循环比赛日期 begin -->
                            <volist name="hot_list" id="races">
                            <div class="item-box">
                                <p class="item-box-title">{$races.date}</p>
                                <ul>
                                    <!-- 循环比赛列表 begin -->
                                    <volist name="races.list" id="race">
                                        <include file="MatchV4/race_template" />
                                    </volist>
                                    <!-- 循环比赛列表 end -->
                                </ul>
                            </div>
                            </volist>
                            <!-- 循环比赛日期 end -->
                        </div>
                    <else />
                        <!--类null-state为空状态-->
                        <div class="content-right-item-null">
                            <div class="null-img1"></div>
                            <div class="null-info font16">暂时没有赛事</div>
                        </div>
                    </notempty>
               </div>
                <div class="event-tab" style="display: none;">
                     <notempty name="forcast_list">
                        <div class="event-hot" >
                            <!-- 循环比赛日期 begin -->
                            <volist name="forcast_list" id="races">
                            <div class="item-box">
                                <p class="item-box-title">{$races.date}</p>
                                <ul>
                                    <!-- 循环比赛列表 begin -->
                                    <volist name="races.list" id="race">
                                        <include file="MatchV4/race_forcast_template" />
                                    </volist>
                                    <!-- 循环比赛列表 end -->
                                </ul>
                            </div>
                            </volist>
                            <!-- 循环比赛日期 end -->
                        </div>
                    <else />
                        <!--类null-state为空状态-->
                        <div class="content-right-item-null">
                            <div class="null-img1"></div>
                            <div class="null-info font16">暂时没有预告</div>
                        </div>
                    </notempty>
              </div>
            </div>
        </div>
        <!--赛事要闻-->
        <div class="match-main-right white-bg right">
            <h1 class="font12 colorthree">
                <span class="left">赛事要闻</span>
                <a href="/match-news" class="colorthree right">更多</a>
            </h1>
            <notempty name="newslist">
                <ul class="news-event">
                    <!-- 循环赛事新闻 begin-->
                    <volist name="newslist" id="news">
                        <include file="MatchV4/news_template" />
                    </volist>
                    <!-- 循环赛事新闻 end-->
                </ul>
            <else/>
                <!--类null-state为空状态-->
                <div class="match-main-right-null">
                    <div class="null-img"></div>
                    <div class="null-info font16 colornine font_micro">暂时没有赛事要闻</div>
                </div>
            </notempty>
        </div>
    </div>
</block>

<block name="component">
    <script src="__ASSET__/Home/v4/lib/js/date_format.js"></script>
    <script src="__ASSET__/Home/v4/lib/js/jquery.zclip.min.js"></script>
    <script src="__ASSET__/Home/v4/lib/js/jwplayer.js"></script>
    <script src="__ASSET__/Home/v4/dist/js/background.js"></script>
    <script src="__ASSET__/Home/v4/dist/js/match_n.js"></script>
    <script>
        window._THIS = {
            detail_url : "{:U('api/match/detailNew', ['group_id' => $show_id['group_id']])}",
            detail_page :"/match-detail-",
            recentResult:"/match-ajaxRecent",
            VideoPlay:"{:C('LOCAL_DOMAIN')}/video-play-",
        }; 
        $(function(){
            $(".swiper-container").HDswiper();
            $(".pre").on('click',function(){
                   var _index=$(this).index();
                   $(".pre").removeClass('active');
                   $(this).addClass('active');
                   $(".event-tab").fadeOut();
                   $(".event-tab").eq(_index).fadeIn();

            })
             $("img.lazy").lazyload({
                    effect: "fadeIn",
                    threshold :180,
                    // event: "scrollstop"
             })
        });
        var show_id = {$show_id|json_encode};
    </script>
</block>
